import Link from "next/link";
import { useRouter } from "next/router";
import css from "./index.module.css";

export default () => {
  const router = useRouter();
  return (
    <ul className={css.header}>
      <li>
        <Link href="/">首页</Link>
      </li>
      <li>
        <Link href="/movies">电影</Link>
      </li>
      <li>
        {/* href 找的是文件目录 */}
        <Link href="/movies/[id]" as="/movies/3">
          电影详情页
        </Link>
      </li>
      <li>
        <button
          onClick={() => {
            router.push("/movies/[...params]", "/movies/1/2/3"); // 动态路由第一个参数是匹配规则，第二个参数是实际路由
            // 非动态路由只写一个就行
          }}
        >
          点击按钮跳转到多段路由
        </button>
      </li>
    </ul>
  );
};
